<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="common/script/util/echarts.min.js"></script>
</head>
<body style=" width:98%;" id = "body1"  onresize="getsize()">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:75%;"></div>
<script src="common/script/jQuery/jquery-1.11.3.js"></script>


<script type="text/javascript" language="javascript">
    function getWindowSize() {
        var h;

        if(typeof document.compatMode != 'undefined' && document.compatMode == 'CSS1Compat') {
            h = document.documentElement.clientHeight;
        } else if(typeof document.body != 'undefined' && (document.body.scrollLeft || document.body.scrollTop)) {
            h = document.body.clientHeight;
        }

        return h;
    }

    function getsize(){
        var size = getWindowSize();
        //document.getElementById("body1").value = size.x;
        document.getElementById("body1").style.height= size-20+"px";
    }

    window.onload = function(){
        var currentHeight = document.documentElement.clientHeight;
        var body1 = document.getElementById("body1");
        body1.style.height= currentHeight-20+"px";
    }

</script>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例


    var date = [];

    var data = []; //Math.random() * 300

    // 获取数据
    $(function(){
        $.ajax({
            url:"http://47.75.162.103:8181/income/ajaxChartsList",
            type:'post',
            data:'',
            dataType:'json',
            success:function(income){
                console.log("http://47.75.162.103:8181/income/ajaxChartsList");

                for (var i = 1; i < income.list.length; i++) {
                    date.push(income.list[i].fullDate);
                    data.push(income.list[i].value);
                }

                creatCharts();
            },
            error:function(xhr,textStatus,errorThrown){
                for (var i = 1; i < 100; i++) {
                    date.push(1);
                    data.push(1);
                }
                creatCharts();
            }
        });
    })

    // 创建折线图
    function creatCharts() {
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '大数据量面积图',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    },
                    data: data
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
</body>
</html>